import AJAX from '@/utils/ajax'
import User from '@/components/user'
import Emot from '@/components/emot'
import { isLogin } from '@/utils'

class Comment {
  constructor() {
    this.id = $('#comment').data('id')
    this.sid = $('#comment').data('sid')
    this.load()
    this.emo()
    this.add()
    this.user = new User()

    const that = this

    $('body').on('click', '.digg a', function () {
      const type = $(this).data('type')
      const id = $(this).data('id')
      AJAX({ url: 'cmdigg', data: { id, type } }).then((res) => {
        if (res.code > 0) {
          that.load()
        }
        layer.msg(res.msg)
      })
    })

    $('body').on('click', '.reply', function () {
      if (isLogin()) {
        const id = $(this).data('id')
        if ($(`#rep${id}`).html() != '') {
          $(`#rep${id}`).html('')
        } else {
          $('.comms').html('')
          $(`#rep${id}`).html($('#hidcommform').html())
          const pid = $(this).data('pid')
          const tuid = $(this).data('tuid')
          const vid = $(this).data('vid')
          const sid = $(this).data('sid')
          $(`#rep${id} #row_id`).attr('data-id', id)
          $(`#rep${id} .recm_id`).attr('id', 'reply_' + id)
          $(`#rep${id} .subadd`).unbind()
          $(`#rep${id} .subadd`).click(function () {
            const recomm_txt = $(`#rep${id} #commtxt`).val()
            const validate = $(`#rep${id} input[name="validate"]`).val()
            if (recomm_txt === '') {
              layer.msg('你还没有录入回复内容！')
              return
            }
            AJAX({
              url: 'addrecm',
              method: 'post',
              data: { comm_pid: pid, comm_id: id, comm_tuid: tuid, comm_vid: vid, comm_sid: sid, recomm_txt, validate },
            }).then((res) => {
              if (res.code > 0) {
                $(`#rep${id} textarea`).val('')
                $(`#rep${id} input[name="validate"]`).val('')
                that.load()
              }
              that.user.refresh($(`#rep${id} img#verify`))
              layer.msg(res.msg)
            })
          })
        }
      } else {
        that.user.loginform()
      }
    })

    $('body').on('click', '#cm-pages li a', function (e) {
      e.preventDefault()
      const arr = $(this).attr('href').match(/\d+/g)
      that.load({ id: arr[0], sid: arr[1], pid: arr[2], limit: arr[3], p: arr[4] })
    })

    $('.cm-textarea textarea').focus(function () {
      if (!isLogin()) {
        that.user.loginform()
      }
    })
  }
  load(params) {
    AJAX({ url: 'cm', data: params ? params : { id: this.id, sid: this.sid, type: 'pc' } }).then((res) => {
      if (res != '') {
        $('#comment').empty().html(res.comment)
        $('#commnum, .d-title #commnum').text($('#datalist').data('count'))
      } else {
        $('#datalist').html('<li class="kong">当前没有评论，赶紧抢个沙发！</li>')
      }
    })
  }

  add() {
    const that = this
    $('#subcomm').click(function (e) {
      e.preventDefault()
      if (isLogin()) {
        const comm_txt = $('#reply_0 textarea').val()
        if (comm_txt === '') {
          layer.msg('你还没有录入评论内容！')
          return
        }
        const validate = $('input[name="validate"]').val()
        AJAX({ url: 'addcm', method: 'post', data: { id: that.id, sid: that.sid, comm_txt, validate } }).then((res) => {
          if (res.code > 0) {
            $('#reply_0 textarea').val('')
            $('input[name="validate"]').val('')
            that.load()
          }
          that.user.refresh($('img#verify'))
          layer.msg(res.msg)
        })
      } else {
        that.user.loginform()
      }
    })
  }

  emo() {
    const emot = new Emot()
    $('#emots').html(emot.html())
    $('body').on('click', '.emotion', function () {
      var left = $(this).offset().left
      var top = $(this).offset().top
      var id = $(this).attr('data-id')
      $('#smileBoxOuter')
        .css({
          left: left,
          top: top + 25,
        })
        .show()
        .attr('data-id', id)
    })
    $('#smileBoxOuter,.emotion').hover(
      function () {
        $('#smileBoxOuter').attr('is-hover', 1)
      },
      function () {
        $('#smileBoxOuter').attr('is-hover', 0)
      }
    )
    $('.emotion,#smileBoxOuter').blur(function () {
      var is_hover = $('#smileBoxOuter').attr('is-hover')
      if (is_hover != 1) {
        $('#smileBoxOuter').hide()
      }
    })
    $('.smileBox')
      .find('a')
      .click(function () {
        var textarea_id = $('#smileBoxOuter').attr('data-id')
        var textarea_obj = $('#reply_' + textarea_id).find('textarea')
        var textarea_val = textarea_obj.val()
        if (textarea_val == '发布评论') {
          textarea_obj.val('')
        }
        var title = '[' + $(this).attr('title') + ']'
        textarea_obj.val(textarea_obj.val() + title).focus()
        $('#smileBoxOuter').hide()
      })
    $('#smileBoxOuter')
      .find('.smilePage')
      .children('a')
      .click(function () {
        $(this).addClass('current').siblings('a').removeClass('current')
        var index = $(this).index()
        $('#smileBoxOuter').find('.smileBox').eq(index).show().siblings('.smileBox').hide()
      })
  }
}

export default Comment
